<script setup lang="ts">

import { ref } from 'vue'

import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/user'
const userStore = useUserStore()

const { userName, fullName } = storeToRefs(userStore)

let count = 'w', color = ref('blue')
const onClickEv = () => {
  const actionResult = userStore.updateUserName(count += 'w')

  color.value = color.value == 'blue' ? 'yellow' : 'blue'
}
const onClickResetEv = ()=>{
  userStore.$reset()
}

defineProps<{ msg: string }>()
</script>

<template>
  <div>
    <h1 class="page-h1 text-align-center v-color">{{ msg }}</h1>

    <ul>
      <button @click="onClickEv">点击修改数据</button>
      <button @click="onClickResetEv">点击还原数据</button>
      <li>
        <span>姓名：</span>
        <span v-text="userName"></span>
      </li>
      <li>
        <span>全名：</span>
        <span v-text="fullName"></span>
      </li>
    </ul>

    <div>
      <span class="test-v-bind">测试v-bind() CSS变量注入</span>
    </div>
  </div>
</template>

<style scoped lang="less">
.page-h1{
  color: @error-color;
  // width: 300px;
}

.test-v-bind{
  color: v-bind(color);

}
</style>
